<template>
  <div id="commentShow">
    <span class="title">用户评论</span>
      <swiper :options="swiperOption">
        <!-- 分页器 -->
        <div class="swiper-pagination" slot="pagination"></div>
        <swiper-slide class="swiper-slide" v-for="(item,index) in items" :key="index">
          <comment-show-item v-for="temp in item" :item="temp"/>
        </swiper-slide>
        <!-- 左右箭头 -->
        <!--      <div class="swiper-button-prev" slot="button-prev"></div>-->
        <!--      <div class="swiper-button-next" slot="button-next"></div>-->
      </swiper>
  </div>
</template>

<script>
  import CommentShowItem from "./childCpn/CommentShowItem";
  import Show from "../../components/common/Show";
  import axios from "axios";
  export default {
    name: "CommentShow",
    components:{
      CommentShowItem,
      Show
    },
    mounted() {
      axios.post('https://haotry.top/api/admin/getAllShowEva','',{
        headers:{
          'Content-Type':'application/json'
        }
      }).then(res => {
        let data = res.data
        let temp = []
        for (let i=0; i<data.data.length; i++)
        {
          temp.push(data.data[i])
          if(temp.length === 4 || i===data.data.length-1){
            this.items.push(temp)
            temp = []
          }
        }
      })
      console.log('kkk')
      console.log(this.items)
    },
    data(){
      return {
        items:[],
        swiperOption:{
          //显示分页
          pagination: {
            el: '.swiper-pagination'
          },
          //设置点击箭头
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          },
          loop: true
        },
      }
    },
    methods:{
    }

  }
</script>

<style scoped>
  #commentShow{
    width: 100%;
    height: 310px;
    padding: 10px 0;
    border-bottom: 1px solid #0f4984;
  }
  .swiper-slide{
    display: flex;
    margin-top: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .title{
    width: 100px;
    font-size: 20px;
  }
  .swiper-pagination{
    top: 0;
  }
  /deep/.swiper-wrapper{
    padding: 20px 0;
  }

  /deep/.swiper-pagination-bullet{
    width: 40px;
    border-radius: 0;
    height: 4px;
  }
  /deep/.swiper-container-horizontal > .swiper-pagination-bullets{
    height: 20px;
  }
</style>